<template>
  <div>
    <el-dialog :title="title"
      :visible.sync="dialogVisible"
      width="60%"
      :top="`2vh`"
      v-dialogDrag
      :before-close="resetForm">
      <div class="p-d"
        style="height: 100%">
        <div class="preview-box"
          v-if="type === 'video'">
          <video ref="videoRef"
            id="my-video"
            controls="controls"
            autoplay="autoplay">
            <source :src="form.fileAddress"
              type="video/mp4" />
            <track kind="subtitles"
              srclang="zh_CN"
              label="中文"
              src="/mockapi/common/sub?lang=zh_CN" />
            <track kind="subtitles"
              srclang="en_US"
              label="英文"
              src="/mockapi/common/sub?lang=en_US" />
          </video>
        </div>
        <div class="preview-box"
          v-else-if="type === 'image'">
          <!-- <img width="100%" :src="form.fileAddress" alt="" /> -->
          <el-image style="width: 100%; height: 100%"
            :src="form.fileAddress"
            fit="fill"></el-image>
        </div>
        <div v-else-if="type === 'pdf'"
          style="height: 100%">
          <iframe width="100%"
            height="700px"
            class="preview-box"
            :src="`${form.fileAddress}?random=${Math.random()}`"></iframe>
        </div>
        <div v-else>
          <div class="red center">
            <i class="el-icon-warning m-r"></i>（{{
              form.fileName
            }}）文件不支持预览
          </div>
          <EmptyComp class="m-t"
            containerH="30vh"
            :emptyConfig="emptyConfig"
            :showActions="false" />
          <div class="center"
            @click="exportFile(form)">
            <el-link type="primary"> 点击下载文件</el-link>
          </div>
        </div>
      </div>
      <span slot="footer"
        class="dialog-footer">
        <el-button size="small"
          @click="resetForm()">取 消</el-button>
        <!-- <el-button size="small" type="primary" @click="submitForm()">
          确 定
        </el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      title: '',
      type: 'pdf',
      form: {},
      emptyConfig: {
        title: '文件不支持预览',
        imageSvg: 'empty',
        width: '20vh',
        height: '20vh'
      }
    }
  },
  methods: {
    exportFile(row) {
      this.downloadByUrl(row.fileName, row.fileAddress)
    },
    showDialog(params) {
      this.dialogVisible = true
      this.title = params[0].title
      this.type = params[0].type
      this.form = params[0]

      console.log(
        '%c [  ]-68',
        'font-size:13px; background:pink; color:#bf2c9f;',
        this.form
      )
    },
    submitForm() {},
    resetForm() {
      this.form = {}
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
#my-video {
  width: 100%;
}
:deep(.preview-box) {
  width: 100%;
  min-height: 100vh;
  .el-image,
  .el-image__error {
    width: 100%;
    min-height: 55vh;
  }
}
.center {
  text-align: center;
}
</style>
